<template>
	<view class="content">
		<yu-toast
		  :message="message"
		  verticalAlign="bottom"
		  ref="toast">
		  </yu-toast>
		
        <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			
			<block v-for="(item,index) in banner" :key="index">
				<swiper-item>
					<image mode="aspectFit" :src="item"></image>
				</swiper-item>
			</block>
			<!-- <swiper-item>
				<view class="swiper-item uni-bg-red">A</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">C</view>
			</swiper-item> -->
		</swiper>
		
		<uni-notice-bar 
			show-icon="true" 
			scrollable="true" single="true" speed=50
			text="[公告] 小约定迎春新版上线,更多场景等你体验! [公告] 小约定迎春新版上线,更多场景等你体验! ">
		</uni-notice-bar>
		
		<view v-if="false" class="yqview">
			<!-- @tap="yqTap" -->
			<image mode="aspectFit" @tap="yqTap" src="/static/h5/indexyq.png"></image>
		</view>
		<view class="page-sec-head">
			<h3 class="page-sec-title">应用说明</h3>
		</view>
		<view class="notice-view">
			<p>本平台提供给用户间做电子约定的服务，预约服务的过程需要支付一定费用，服务兑现后生成的电子约定受国家电子签名法保护，具有法律效力，一旦产生纠纷可联系我方导出电子约定信息作为佐证，供法院审阅。
</p>
			<p>本平台不涉及借钱平台，在各应用场景中只是作为用户做电子约定的证明方。</p>
		</view>
		
		<view class="page-sec-head">
			<h3 class="page-sec-title">约定场景</h3>
		</view>
		
		<view class="yqview" v-for="(item,index) in theme" :key="item">
			<image mode="aspectFit" @tap="ydTap" :data-index="index" :src="item"></image>
		</view>
		
		<view class="aboutView" @touchmove="aboutMove" @tap="aboutTap">
			<image src="/static/h5/about.png" mode="aspectFit" class="aboutImg"></image>
		</view>
		
		<view class="bottom-view">-- . --</view>
		
	</view>
</template>

<script>
// import {uniBadge} from '@dcloudio/uni-ui'
// import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' //也可使用此方式引入组件
	import uniNoticeBar from '@dcloudio/uni-ui/lib/uni-notice-bar/uni-notice-bar.vue';
	import yuToast from '@/components/yu-toast/yu-toast';
	
	export default {
		components: {uniNoticeBar,yuToast},

		data() {
			return {
				banner:[
					"/static/h5/01.jpg",
					"/static/h5/02.jpg",
					"/static/h5/03.jpg",
				],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				message: '提示信息',
				theme:[
					"/static/h5/ty.png",
					"/static/h5/toptabli06.png",
					"/static/h5/toptabli08.png",
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			aboutMove:function(e){
				// console.log("e:"+JSON.stringify(e));
				console.log(e.changedTouches[0])
			},
			aboutTap:function(e){
				uni.navigateTo({
					url:"/pages/about/detail/detail"
				})
			},
			yqTap:function(e){
// 				uni.showToast({
// 					title:"礼品正在配送中"
// 				})
			 this.message = "礼品正在配送中"
			 this.$refs.toast.show()

			},
			
			ydTap:function(e){
				// console.log(JSON.stringify(e))
				var index = e.target.dataset.index;
				index = parseInt(index);
				var type = "祝福";
				switch (index){
					case 0:
					type = "通用"
						break;
						
					case 1:
					type = "爱情"

						break;
							
					case 2:
						break;
						
					default:
						break;
				}
				
				console.log(''+index);
				
				uni.navigateTo({
					url:"/pages/index/dealDet/dealDet?ydtype="+type
				})
			}
		}
	}
</script>

<style>

.aboutView{
	position: fixed;

	height: 100upx;
	width: 100upx;
	right: 20px;
	bottom: 70px;
	/* border: 2px solid #EE0000; */
	border-radius: 50% 50%;
	background-color: rgba(250,10,10,0.3);	
	text-align: center;
}

.aboutView image{
	width: 60upx;
	height: 60upx;
	margin-top: 20upx;
}

.notice-view{
	border-radius: 10upx;
	border: 1px solid red;
	margin: 30upx;
	text-align: left;
	text-indent: 60upx;
	font-size: 30upx;
}

	.content {
		text-align: center;
		height: 400upx;
	}
    .logo{
        height: 200upx;
        width: 200upx;
        margin-top: 200upx;
    }
	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
	
	.swiper
	{
		width: 100%;
		height: 400upx;
	}
	swiper-item image
	{
		width: 100%;
		height: 100%;
	}
	
	.yqview{
		width: 100%;
		text-align: center;
	}
	
	.yqview image
	{
		width: 669upx;
		height: 160upx;
	}
	
	.page-sec-head
	{
		width: 100%;
	}
	.page-sec-title
	{
		font-size: 35upx;
		/* background-color: #8F8F94; */
		width: 675upx;
		margin-left: 25upx;
		text-align: left;
		padding-left: 25upx;
		border-left: 10upx solid #ee0000;
		
	}
	.bottom-view{
		margin: 20upx;
		padding: 20upx;
		color: lightgray;
	}
</style>
